<template>
  <div>
    <div class="comment-text">
      <div class="border-div" ><span></span></div>
      <div class="comment-content" v-if="i.commentContent" @click="reply">
        <div class="comment-desc">
          <img class="install-headerimg" v-if="i.commentUserHeadImage" :src="i.commentUserHeadImage" />
          <img class="install-headerimg" v-else src="../../../static/img/installheaderimg.jpg" />
        </div>
        <div class="comment-desc">
          <flexbox orient="vertical">
            <flexbox-item><div class="flex-demo">{{i.commentUserName}}</div></flexbox-item>
            <flexbox-item><div class="flex-demo">{{i.commentContent}}</div></flexbox-item>
            <flexbox-item>
              <div class="flex-demo">
                <flexbox class="circle-date">
                  <flexbox-item><div class="flex-demo">{{i.commentTime | timecircle}}</div></flexbox-item>
                </flexbox>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
        <p class="clear"></p>
      </div>
      <div  v-if="i.commentContent" class="check-reply" @click="reply">查看全部回复</div>
      <div v-else class="check-reply">暂无评论</div>
    </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, Popover } from 'vux'
export default {
  props: ['i'],
  components: {
    Flexbox,
    FlexboxItem,
    Popover
  },
  methods: {
    // 查看全部回复
    reply () {
      this.$router.push('/circle/detail?circle_id=' + this.i.id)
    }
  }
}
</script>
